<template>
    <div class="form">
        <el-form label-width="auto" :rules="formRules" ref="formRef" :model="ownerInformation">
            <!--
            <el-form-item label="楼层">
                <el-input v-model="ownerInformation.numberOfLayers" placeholder="请输入"></el-input>
            </el-form-item>楼层交给单元管理-->
            <el-form-item label="单元id" prop="unitId">
                <el-select v-model="ownerInformation.unitId" placeholder="单元id" style="width: 400px">
                    <el-option v-for="ownerInformation in options" :key="ownerInformation.value" :label="ownerInformation.label" :value="ownerInformation.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="房屋名称" prop="name">
                <el-input v-model="ownerInformation.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="建筑面积" prop="area">
                <el-input v-model="ownerInformation.area" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="算费系数" prop="calculationCoefficient">
                <el-input v-model="ownerInformation.calculationCoefficient" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-input v-model="ownerInformation.status" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商铺" prop="shops">
                <el-input v-model="ownerInformation.shops" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商品房" prop="commercialHousing">
                <el-input v-model="ownerInformation.commercialHousing" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item class="button">
                <el-button type="info" @click ="cancel">取消</el-button>
                <el-button type="primary" @click="save(formRef)">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import http from '../utils/http'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
let router = useRouter()
import { onBeforeMount, ref } from 'vue'
import House from './House.vue';
let ownerInformation = ref({
    id: router.currentRoute.value.query.id,
    floor: '',
    unitId: '',
    name:'',
    area:'',
    calculationCoefficient:'',
    status:'',
    shops:'',
    commercialHousing:'',
})
const options = [
    {
        value: '1',
        label: '1',
    },
    {
        value: '2',
        label: '2',
    }
]
let formRef = ref(null)
  //定义规则
let formRules = ref({
    id: [
        { required: true, message: '请输入id', trigger: 'blur' }
    ],
    floor: [
        { required: true, message: '请输入楼层', trigger: 'blur' }
    ],
    unitId: [
        { required: true, message: '请输入单元id', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    area: [
        { required: true, message: '请输入区域面积', trigger: 'blur' }
    ],
    calculationCoefficient: [
        { required: true, message: '请输入算费系数', trigger: 'blur' }
    ],
    status: [
        { required: true, message: '请输入状态', trigger: 'blur' }
    ],
    shops: [
        { required: true, message: '请输入商场', trigger: 'blur' }
    ],
    commercialHousing: [
        { required: true, message: '请输入商品房', trigger: 'blur' }
    ]
})
onBeforeMount(async()=>{
    if(ownerInformation.value.id){
        let resp = await http.get(`/house/selectById/${ownerInformation.value.id}`)
        ownerInformation.value = resp.data
    }
})
async function save(formRef){
    formRef.validate(async function(valid){
        if (valid) {
            let tip = ownerInformation.value.id ? '修改' : '保存'
            let resp = await http.post('/house/addOrUpdate',ownerInformation.value)
            if(resp.code == 200){
                ElMessageBox.alert(tip+'成功', tip+'业主', {
                    confirmButtonText: 'OK'
                })
                router.go(-1)
            }else{

            }
    }
    }
    )
}
function cancel(){
    router.go(-1)
}
</script>

<style lang="css" scoped>
.form {
    width:400px;
    position: relative;
    right: -200px;
}
.el-form-item__label {
    width: 120px;
}
.type {
    width:400px;
}
.type1 {
    position: relative;
    right: -200px;
}
.pattern {
    position: relative;
    right: -650px;
    top: -100px;
}
.button {
    position: relative;
}
</style>